Skip to main content

Pageflow – Control Events

The Control Events node in Digisquares Pageflow allows you to respond to user interactions with individual UI elements on a page—buttons, form fields, containers, and any other interactive component. Use Control Events to trigger validation, navigation, data fetches, or custom logic whenever a user clicks, hovers, focuses, or otherwise interacts with a control.

1. Opening the Control Events Palette​

  1. On your Pageflow canvas, hover over the node beneath which you want to insert a control-triggered action.

  2. Click the + button to open the Actions palette.

  3. Select Control Events from the list of event categories.

    CategoryDescription
    PageTriggerRoot category for page-level triggers.
    Page EventsEvents tied to the overall page (load, unload, scroll, refresh).
    Control EventsUser interactions on individual UI elements (click, focus, hover, etc.).
    App State EventsGlobal state changes (theme, locale, user data updates, errors).
    Page State EventsData-specific page changes (load/update/error).

2. Configuring a Control Event Node​

When you select Control Events, a configuration modal appears with three dropdowns:

─────────────────────────────────────────────
│ Control Events                            │ ✕ │
├───────────────────────────────────────────┤
│ Select Page      [ ▾ Login Page       ]  │
│ Select Control   [ ▾ Container        ]  │
│ Select Event     [ ▾ onMouseEnter     ]  │
├───────────────────────────────────────────┤
│                       [ OK ] [ Cancel ]  │
─────────────────────────────────────────────

2.1 Select Page​

  • Purpose: Choose the page whose controls you want to listen to.

  • Options: All pages in your project. For example:

    • Login Page
    • Sample Login Page
    • Welcome Back Page
    • Register Form
    • Thank You Page
    • Application Form
    • Revenue Dashboard
    • Step Design

Tip: Only controls on the selected page will be available in the next dropdown.

2.2 Select Control​

  • Purpose: Choose the specific UI component on the selected page.

  • Options: All named controls (by ID or component name), such as:

    • Container
    • Button (e.g., SubmitButton)
    • Input fields (e.g., EmailInput, PasswordInput)
    • Dropdowns, checkboxes, radio groups, etc.

Note: Controls are populated based on the Page’s design metadata.

2.3 Select Event​

  • Purpose: Choose the interaction event type to capture.

  • Options: Standard DOM-style events, for example:

    • onClick (mouse or touch click)
    • onDoubleClick
    • onMouseEnter / onMouseLeave
    • onFocus / onBlur
    • onKeyDown, onKeyUp
    • onChange (for inputs)
    • onClose, onResize, etc.

Best Practice:

  • Use onClick for primary actions (form submissions, navigation).
  • Use onMouseEnter/ onMouseLeave sparingly for hover effects or tooltips.
  • For forms, prefer onChange or onBlur to validate user input as they type or leave the field.

3. Saving & Binding Your Control Event​

  1. After selecting Page, Control, and Event, click OK.
  2. A new Control Event node appears on the canvas, connected under your chosen parent node.
  3. Hover over the new node to reveal ✏️ Edit and 🗑️ Delete icons.
  4. Click ✏️ to reopen the modal and adjust your selections or bind node inputs to variables.

4. Example: Show Tooltip on Hover​

  1. Select Page: Login Page
  2. Select Control: Container
  3. Select Event: onMouseEnter
  4. Add Child Node: Custom Script or UI Action to display a tooltip with user guidance.
Page Events
 └─ Control Event: [Login Page > Container > onMouseEnter]
     └─ UI Action: ShowTooltip(text="Enter your credentials here")

5. Best Practices & Tips​

  • Name Your Controls: Assign meaningful IDs (e.g., LoginButton, EmailInput) to simplify dropdown selection.
  • Scope Variables: Bind event data (e.g., cursor position, input value) into Flow Variables for downstream use.
  • Throttle High-Frequency Events: If using onScroll or rapid focus changes, wrap your logic in a Delay/Timer node to prevent performance issues.
  • Combine with Conditions: Use the Advanced Settings in the modal to only fire events when certain conditions are met (e.g., page.isLoggedIn == false).
  • Preview Interactions: Switch to Preview mode to test how Control Events fire in real time before saving.

6. Summary​

The Control Events feature of the Pageflow editor empowers you to:

  • Listen to and respond to granular user interactions on your pages.
  • Seamlessly bind UI events to downstream actions without hand-coding event listeners.
  • Maintain a consistent, visual approach to building interactive workflows across your application.